<template>
	<view class="container">
		<!-- F1输入按钮 -->
		<view class="input-group">
			<input v-model="uname" class="input" type="text" placeholder="手机号" @blur="phone">
					<uni-icons  :type="s6" :color="c6" :size="28" />
		</view>
		<view class="input-group">
			
			<input class="input" v-model="upwd" :password="ispassword" placeholder="登陆密码" @blur="upwds">
			<uni-icons :type="ispassword ? 'eye-slash' : 'eye'" size="20" @click="ispassword=!ispassword" color="#666"></uni-icons>
			<uni-icons :type="s3" :color="c3" :size="28"  /> 


		</view>
		<!-- F2提交按钮 -->
		<button type="primary" class="btn" @click="doLogin">登录</button>
		<!-- F3跳转到注册 -->
		<text @click="goToRegister" class="text">还没账号？点击此处注册账号</text>
		<!-- F4其他登陆方式 -->
		<view class="rloginw">
		<text class="rlogin">其他登录方式</text>
		</view>
		<view class="icons">
			<uni-icons type="qq" size="40" color="#0aa1ed"></uni-icons>
			<uni-icons type="weixin" size="40" color="green"></uni-icons>
			<uni-icons type="weibo" size="40" color="red"></uni-icons>
		</view>

		<!-- F5同意登陆条款 -->
	</view>
		</view>
</template>

<script>
  import {userLogin} from '@/service/index.js'
	export default {
		
		name: "dknLogin",
		data() {
			return {
				ispassword: true, //输入框是否显示为’密码输入框‘
				uname: '',
				upwd: '',
				s3:'checkbox-filled',
				c3:'transparent',
				s6:'checkbox-filled',
				c6:'transparent',
				t3:'',
				t6:'',
				up:'',
				ph:''
			};
		},
		methods: {
			goToRegister() {
				this.$emit('showChild', {
					childName: 'register'
				})
			},
			upwds(e){
					let upwd=e.detail.value
				      let exp = /^\d{6}$/
				      if (exp.test(upwd)) {
				          this.c3 ="green" ;
						  this.up=upwd
						   this.t3=true
				
				      } else {
				        this.c3 = "red";
				        this.s3="clear"
						this.t3=false
				    
				      }
			},
			phone(e){
				let phone=e.detail.value
				let exp =/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
				      if (exp.test(phone)) {
				        console.log("验证通过");
				       this.c6 ="green" ;
					    this.t6=true
						this.ph=phone
				      
				      } else {
				       this.c6 = "red";
				       this.s6="clear"
					     this.t6=false
				       
				      }
			},
		async doLogin() {
			   //当点击提交按钮时执行
			   if ( this.t3&&this.t6) {
			 let res=await userLogin(this.ph,this.up)  
			  console.log(res)
if(res.code==200){
	 uni.setStorageSync('username',res.result.nickname);
	 uni.setStorageSync('phone',res.result.phone);
	  uni.setStorageSync('uid',res.result.uid);
	uni.switchTab({
		url:'/pages/my/my',	
	})
	window.location.reload()
}
		
			   } else {
			     console.log("验证失败");
			   }
			 },
			// async(){
			// 		let res=await userLogin(this.uname,this.upwd)
			// 		console.log(res)
			// 		if(res.code==200){
			// 			uni.showToast({
			// 				title:'登陆成功'
			// 			})
			// 		this.$emit('showChild',{childName:'profile'})

			// 		}else{

			// 		}

			// 	}

		},
		mounted() {
			//uni-app中组件的生命周期方法!!不放在methods里
			uni.setNavigationBarTitle({
				title: '用户登录'
			})
		}

	}
</script>

<style lang="scss">
	.container {
		padding: 20px;

		.input-group {
			border-bottom: 1px solid #666;
			padding: 12px 10px;
			display: flex;
			align-items: center;

			input {
				flex: 1;
			}

			.separator {
				margin: 0 .5em;
			}
		}

		.btn {
		margin-top: 40px ;
			margin-bottom: 20px;
			border-radius: 40px;
			background-color: #a397fd;
		}

		.text {
			color: #666;
		}
		.rloginw{
			margin-top: 30px;
			width: 100%;
			height: 20px;
			text-align: center;
			.rlogin{
				position: relative;
				color: #b5b5b5;
			}
			.rlogin:before,{
				content: '';                 /*CSS伪类用法*/
				position: absolute;         /*定位背景横线的位置*/
				top: 52%;
				background: #b5b5b5;       /*宽和高做出来的背景横线*/
				width: 120%;
				height: 1px;
				left: 105%;
			}	
			.rlogin:after{
				content: '';                 /*CSS伪类用法*/
				position: absolute;         /*定位背景横线的位置*/
				top: 52%;
				background: #b5b5b5;       /*宽和高做出来的背景横线*/
				width: 120%;
				height: 1px;
				right: 105%;
			}
			
		}
		.icons{
			margin-top: 50px;
			display: flex;
			justify-content: space-evenly;
		}
	}
</style>
